<template>
  <view class="map-container">
    <!-- 地图组件 -->
    <map
      class="map"
      :latitude="centerLatitude"
      :longitude="centerLongitude"
      :markers="markers"
      :scale="14"
      :show-location="true"
      @markertap="handleMarkerTap"
    ></map>

    <!-- 医院列表 -->
    <scroll-view class="hospital-list" scroll-y>
      <view 
        class="hospital-item"
        v-for="(hospital, index) in hospitals"
        :key="index"
        @tap="selectHospital(hospital)"
        :class="{ active: selectedHospital && selectedHospital.id === hospital.id }"
      >
        <image :src="hospital.image" mode="aspectFill" class="hospital-image"></image>
        <view class="hospital-info">
          <text class="hospital-name">{{ hospital.name }}</text>
          <view class="distance-info">
            <text class="hospital-address">{{ hospital.address }}</text>
            <text class="distance">{{ hospital.distance }}</text>
          </view>
          <view class="hospital-tags">
            <text class="tag" v-for="(tag, tagIndex) in hospital.tags" :key="tagIndex">{{ tag }}</text>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar" v-if="selectedHospital">
      <view class="hospital-brief">
        <text class="name">{{ selectedHospital.name }}</text>
        <text class="distance">{{ selectedHospital.distance }}</text>
      </view>
      <view class="actions">
        <button class="action-btn" @tap="openLocation">导航</button>
        <button class="action-btn primary" @tap="goToHospitalDetail">查看详情</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      centerLatitude: 0,
      centerLongitude: 0,
      hospitals: [],
      selectedHospital: null,
      markers: []
    }
  },

  onLoad(options) {
    // 获取传入的位置参数
    this.centerLatitude = parseFloat(options.latitude) || 0
    this.centerLongitude = parseFloat(options.longitude) || 0
    this.loadNearbyHospitals()
  },

  methods: {
    async loadNearbyHospitals() {
      try {
        // TODO: 替换为实际的API调用
        // const res = await api.getNearbyHospitals({
        //   latitude: this.centerLatitude,
        //   longitude: this.centerLongitude
        // })
        // this.hospitals = res.data
        this.hospitals = [
          {
            id: 1,
            name: '仁爱医院',
            address: '北京市朝阳区建国路18号',
            distance: '1.2km',
            tags: ['三甲医院', '可预约', '支持医保'],
            image: '/static/images/hospital1.jpg',
            latitude: 39.9219,
            longitude: 116.4551
          }
        ]
        
        // 生成地图标记点
        this.markers = this.hospitals.map((hospital, index) => ({
          id: hospital.id,
          latitude: hospital.latitude,
          longitude: hospital.longitude,
          title: hospital.name,
          iconPath: '/static/images/marker.png', // 需要准备一个标记点图标
          width: 32,
          height: 32
        }))
      } catch (error) {
        console.error('加载附近医院失败:', error)
        uni.showToast({
          title: '加载医院失败',
          icon: 'none'
        })
      }
    },

    handleMarkerTap(e) {
      const hospital = this.hospitals.find(h => h.id === e.markerId)
      if (hospital) {
        this.selectHospital(hospital)
      }
    },

    selectHospital(hospital) {
      this.selectedHospital = hospital
      // 将地图中心移动到选中的医院
      this.centerLatitude = hospital.latitude
      this.centerLongitude = hospital.longitude
    },

    openLocation() {
      if (!this.selectedHospital) return
      
      uni.openLocation({
        latitude: this.selectedHospital.latitude,
        longitude: this.selectedHospital.longitude,
        name: this.selectedHospital.name,
        address: this.selectedHospital.address,
        fail: () => {
          uni.showToast({
            title: '打开导航失败',
            icon: 'none'
          })
        }
      })
    },

    goToHospitalDetail() {
      if (!this.selectedHospital) return
      
      uni.navigateTo({
        url: `/pages/hospital/detail?id=${this.selectedHospital.id}`
      })
    }
  }
}
</script>

<style lang="scss">
.map-container {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .map {
    flex: 1;
    width: 100%;
  }

  .hospital-list {
    height: 40vh;
    background: #fff;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    box-shadow: 0 -4rpx 16rpx rgba(0,0,0,0.1);
    
    .hospital-item {
      display: flex;
      padding: 20rpx;
      border-bottom: 1rpx solid #eee;
      transition: all 0.3s;
      
      &.active {
        background: #f0f9ff;
      }
      
      .hospital-image {
        width: 160rpx;
        height: 120rpx;
        border-radius: 8rpx;
        margin-right: 20rpx;
      }
      
      .hospital-info {
        flex: 1;
        
        .hospital-name {
          font-size: 28rpx;
          color: #333;
          font-weight: bold;
        }
        
        .distance-info {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 10rpx 0;
          
          .hospital-address {
            flex: 1;
            font-size: 24rpx;
            color: #666;
          }
          
          .distance {
            font-size: 24rpx;
            color: #007AFF;
            margin-left: 20rpx;
          }
        }
        
        .hospital-tags {
          display: flex;
          flex-wrap: wrap;
          
          .tag {
            font-size: 22rpx;
            color: #007AFF;
            background: rgba(0,122,255,0.1);
            padding: 4rpx 12rpx;
            border-radius: 4rpx;
            margin-right: 10rpx;
            margin-bottom: 10rpx;
          }
        }
      }
    }
  }

  .bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    padding: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
    
    .hospital-brief {
      .name {
        font-size: 28rpx;
        color: #333;
        font-weight: bold;
        margin-right: 20rpx;
      }
      
      .distance {
        font-size: 24rpx;
        color: #007AFF;
      }
    }
    
    .actions {
      display: flex;
      
      .action-btn {
        margin-left: 20rpx;
        height: 72rpx;
        line-height: 72rpx;
        padding: 0 30rpx;
        font-size: 28rpx;
        border-radius: 36rpx;
        
        &:not(.primary) {
          color: #666;
          background: #f5f5f5;
        }
        
        &.primary {
          color: #fff;
          background: #007AFF;
        }
      }
    }
  }
}
</style> 